<template>
  
        <div class="my-tag">
              <input
                class="input"
                type="text"
                placeholder="输入标签"
              v-if="ited"
             v-focus
             @blur="edit=false"
             @keydown.enter="confirm"
               v-model.trim=tag
              />
              <div @dblclick="Todoclick"   v-else class="text">{{value}}</div>
            </div>
   
</template>

<script>
export default {
    props:{
       value:{
        type:String,
        required: true,
        
       }
    },
    
     
    
    directives: {
    focus: {
      inserted(el) {
        // 当指令绑定的元素插入到 DOM 上时获取焦点
        //console.log(el);
         el.focus()
        
      }
    }
  },

    data() {
        return {
            ited:false,
            tag:''
        };
    },
    methods:{
        Todoclick(){
            this.ited=!this.ited
            //数据回显
           this.tag=this.value
        },
         confirm(){
            if(this.tag==='')return this.tag="暂无"
        // 当用户按下回车时触发该事件
      // 将用户输入的内容传递给父组件
      this.$emit('input', this.tag)
      // 让文本框隐藏
      this.ited = false
      
      }
    },
   

   
};
</script>

<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>